<template>
	<view class="prizelist">
		<!--引导手指-->
		<view class="guide" v-if="isshowGuide">
			<image src="/static/image/finger.png" mode="aspectFill"></image>
			<view class="guideinfo">
				<view class="guidesanjiao"></view>
				<view class="guidetext">点击参与抽奖</view>
			</view>
		</view>
		<view class="prize-box" v-for="(item,index) in giftlist" @click="jonindraw(index)" :key="index">
			<!--是否参与icon-->
			<image v-if="item.iId" class="joinicon" src="/static/image/alreadyInvolved.png" mode="aspectFill"></image>
			
			<view class="prize-item">
				<!--抽奖图片-->
				<view class="prizeimg">
					<image class="itemimg" :src="item.thumb" mode="aspectFill"></image>
					<!--是否为短视频抽奖-->
					<view :class="['boxshortvideo',item.short_video_platform==2?'kwaibg':'']" v-if="item.short_video_platform>0">
						<image :src="item.short_video_platform==1?'/static/image/follow_douyin.png':'/static/image/follow_kwai.png'" mode="aspectFill"></image>
					</view>
				</view>
				
				<view class="prizedetail">
					<view class="item-top">
						<view class="title"><text class="eli">{{item.title}}</text><text class="count" v-if="item.pType != 'red_envelope'">x{{item.pCount}}份</text></view>
					</view>
					<view class="item-bottom">
						<view class="prize-info">
							<!--蓝v认证-->
							<view class="blue-auth" v-if="item.bAuth==2">
								<image :src="item.bIco" mode="heightFix"></image>
								<view class="business">{{item.bTitle}}</view>
							</view>
							<view v-else class="sponsor">{{item.bTitle}} 赞助</view>
							<!--抽奖高级选项-->
							<view class="senior">
								<image v-if="item.redCount>0" :src="seniorIcon[0]" mode="aspectFill"></image>
								<image v-if="item.boost>0" :src="seniorIcon[1]" mode="aspectFill"></image>
								<image v-if="item.pay_total>0" :src="seniorIcon[2]" mode="aspectFill"></image>
							</view>
						</view> 
						<!--开奖方式-->
						<view class="prize-type">{{item.draw_type}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			giftlist: {
				type: Array,
				default () {
					return []
				}
			}
		},
		created() {
			let giftusr = uni.getStorageSync('user_info')
			//是否需要出现引导
			this.$common.state.ttylguide =  giftusr?giftusr.lottery_app:this.$Initdata.lottery_app
			console.log(this.$common.state.ttylguide);
		},
		computed: {
			guideflags() {
				//是否需要引导
				return this.$common.state.ttylguide;
			}
		},
		watch: {
			guideflags(option) {
				this.isshowGuide = option
			}
		},
		data() {
			return {
				isshowGuide: false, //是否需要用户引导
				seniorIcon: ['/static/image/dividebag.png', '/static/image/help.png', '/static/image/guarantee.png'],
			}
		},
		methods: {
			//用户点击参与抽奖
			jonindraw(index) {
				let giftitem = this.giftlist[index]
				console.log(giftitem)
				let url = '/pages/lottery/lottery'
				if (giftitem.pType == 'red_envelope') {
					//红包跳转地址
					url = '/pages/bagdraw/drawpage'
				}
				uni.navigateTo({
					url: url + '?id=' + giftitem.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.prizelist {
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;

		.guide {
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			z-index: 999;
			animation: fingermove 1.5s 0.5s infinite;

			image {
				width: 130rpx;
				height: 103rpx;
			}

			.guideinfo {
				width: 180rpx;
				height: 65rpx;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				flex-direction: column;

				.guidesanjiao {
					margin-right: 50rpx;
					width: 0;
					height: 0;
					border-bottom: 8rpx solid $uni-color-primary;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
				}

				.guidetext {
					background-color: $uni-color-primary;
					font-size: 25rpx;
					color: #fff;
					width: 180rpx;
					height: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 15rpx;
					padding: 0 5rpx;

				}
			}
		}

		// 引导动画
		@keyframes fingermove {
			0% {
				top: 220rpx;
				right: 120rpx;
			}

			50% {
				top: 150rpx;
				right: 140rpx;
			}

			100% {
				top: 220rpx;
				right: 120rpx;
			}
		}

		.prize-box {
			width: 100%;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f4f4f4;
			position: relative;

			.joinicon {
				display: block;
				width: 109rpx;
				height: 40rpx;
				position: absolute;
				top: 20rpx;
				z-index: 999;
			}
			
			.prize-item {
				width: 90%;
				margin: 0 auto;
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;

				.prizeimg {
					border: 1rpx solid #f4f4f4;
					width: 165rpx;
					height: 140rpx;
					border-radius: 20rpx;
					margin-right: 30rpx;
					position: relative;
					.itemimg{
						width: 165rpx;
						height: 140rpx;
						border-radius: 20rpx;
					}
					.boxshortvideo{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 38rpx;
						height: 38rpx;
						position: absolute;
						z-index: 998;
						right: 6rpx;
						top: 8rpx;
						border-radius: 10rpx;
						background-color: #161823;
						border: 1rpx solid #fff;
						image{
							width: 26rpx;
							height: 30rpx;
						}
					}
					.kwaibg{
						background-color: #ff4906;
					}
				}

				.prizedetail {
					// border: 1rpx solid #000;
					width: 75%;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;

					.item-top {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 500rpx;
							font-size: 32rpx;
							font-weight: bold;
								
							.eli {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 78%;
							}
							.count {
								font-size: 28rpx;
								color: #5e5e5e;
								font-weight: normal;
								margin-left: 10rpx;							
							}
						}
					}

					.item-bottom {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						flex-direction: column;
					
						.prize-type {
							color: #5e5e5e;
							font-size: 22rpx;
						}
						.prize-info {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							width: 100%;
							font-size: 28rpx;
							color: #000;
							

							//普通商户标识
							.sponsor {
								// background-color: #f4f4f4;
								padding:3rpx 15rpx;
								border-radius: 8rpx;
								margin-top: 25rpx;
								margin-bottom: 15rpx;
								font-size: 22rpx;
								border: 1rpx solid #333;
								color: #333;
							}

							//认证商户标识
							.blue-auth {
								border-radius: 8rpx;
								background-color: $uni-color-primary;
								padding: 5rpx 5rpx 5rpx 20rpx;
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin-bottom: 15rpx;
								margin-top: 25rpx;
								image {
									border-radius: 0;
									height: 20rpx;
									margin-right: 10rpx;
								}

								.business {
									font-size: 22rpx;
									color: $uni-color-primary;
									background-color: #fff;
									padding: 0rpx 10rpx;
								}
							}

							.senior {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin-bottom: 10rpx;
								height: 38rpx;
								image {
									border-radius: 0;
									width: 38rpx;
									height: 38rpx;
									margin-right: 8rpx;
								}
							}

							
						}
					}
				}
			}
		}
	}
</style>
